<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性与观察者</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>Original message: "{{ sourceMsg }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>

        <h1>otherFullName:{{otherFullName}}</h1><br>
        <h2>fullName:{{fullName}}</h2><br>

        <h3>fullNameMethod:{{fullNameMethod()}}</h3><br>


    </div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            sourceMsg:"this is the source message!",
            firstName:'hill',
            secondName:'chen',
            otherFullName:'hill chen'

        },
        /**
         * 计算属性是基于它们的依赖进行缓存的
         */
       computed:{
            reversedMessage:function () {
                return this.sourceMsg.split('').reverse().join('');
            },
            fullName:{
                get:function () {
                   return this.firstName + " " + this.secondName;
               },
                set:function (newValue) {
                    var names = newValue.splice(" ");
                    this.firstName = names[0];
                    this.secondName = name[1];
                }
            }
        },
        methods:{
            reversedMthod:function () {
                return this.sourceMsg.split('').reverse().join('');
            },
            fullNameMethod:function () {
                return this.firstName + " " + this.secondName;
            },
        },
        watch:{
            firstName:function (val) {
                this.otherFullName = val + " " + this.secondName;
            },
            secondName:function (val) {
                this.otherFullName = this.firstName + " " + val;
            }
        }
    });
</script>
</html>